import React from 'react';
import { connect } from 'dva';
import { Button, Table, Form, Input, Popconfirm,DatePicker, Select,TreeSelect,   } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;
const RangePicker = DatePicker.RangePicker;
import InventorySheetResultModal from '../../components/inventory/InventorySheetResultModal';

function InventorySheet ({ dispatch, inventorySheet, loading, form }) {

    const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
    const { modalVisible, modalType,roomList,newKey,currentViewItem,modalViewVisible,detailList} = inventorySheet

    const columns = [{
        title: '计划名称',
        dataIndex: 'inventoryName',
        key: 'inventoryName',
        width: 100,
    },{
        title: '机房',
        dataIndex: 'roomName',
        key: 'roomName',
        width: 100,
    },{
        title: '盘点类型',
        dataIndex: 'inventoryType',
        key: 'inventoryType',
        width: 80,
        render: (value, row, index) => {
            return (
                value==1?"自动盘点":value==2?"手动盘点":""
            )
        }
    },{
        title: '盘点单名称',
        dataIndex: 'inventorySheetName',
        key: 'inventorySheetName',
        width: 150,
    },{
        title: '执行时间',
        dataIndex: 'executeTime',
        key: 'executeTime',
        width: 150,
    },{
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 100,
    },{
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 80,
        render: (value, row, index) => {
            return (
                value==1?"未完成":value==2?"已完成":""
            )
        }
    },{
        title: '操作',
        key: 'operation',
        width: 80,
        render: (text, record) => (
            <span>
              <a onClick={onViewItem.bind(null, record.id_)}>查看盘点结果</a>
            </span>
        ),
    }];

    const pagination = {
        current:inventorySheet.current,
        pageSize:inventorySheet.currentSize,
        total: inventorySheet.total,
        showSizeChanger: true,
        showTotal: (total => '共' + inventorySheet.total + '条'),
        onShowSizeChange(current, size) {
            dispatch({
                type: 'inventorySheet/queryList',
                payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':size} },
            });
        },
        onChange(current) {
            dispatch({
                type: 'inventorySheet/queryList',
                payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':inventorySheet.currentSize} },
            });
        },
    };

    const submitHandle = () => {
        dispatch({
            type: 'inventorySheet/queryList',
            payload: { ...getFieldsValue() },
        });
    }

    function handleClear(){
      form.resetFields();
    }

    const onViewItem = (id) => {
        dispatch({
            type: 'inventorySheet/onViewItem',
            payload:id,
        })
    }
   
    const modalViewProps = {
        item: currentViewItem,
        visible: modalVisible,        
        detailList:inventorySheet.detailList,
        dispatch:dispatch,
        assetCurrent:inventorySheet.assetCurrent,
        assetCurrentSize:inventorySheet.assetCurrentSize,
        assetTotal:inventorySheet.assetTotal,
        maskClosable: false,
        confirmLoading: loading,
        title: inventorySheet.viewModalType === 'view' ? <div style={{fontSize:'16px'}}><span>盘点名称:{currentViewItem.inventorySheetName}</span></div>:'',
        wrapClassName: 'vertical-center-modal',
        newKey : newKey,
        onCancel () {
            dispatch({
                type: 'inventorySheet/hideModal',
            })
        },
    }

    const loopRoom = data => data.map((item) => {
      return <Option key={item.id_ + ''}>{item.name}</Option>
    });

    return (
         <div style={{backgroundColor:'#fff'}}>
          <div style={{minHeight:'100%'}}>
              <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingTop:'10px'}}>
                  <Form layout="inline" >
                    <FormItem>
                        {
                            getFieldDecorator('roomId')(
                             <Select
                                  showSearch
                                  style={{ width: 250 }}
                                  placeholder="选择机房"
                                  optionFilterProp="children"
                              >
                              {loopRoom(inventorySheet.roomList)}
                              </Select>
                            )
                         }
                    </FormItem>
                    <FormItem>
                            {getFieldDecorator('inventoryType')(
                            <Select
                                showSearch
                                style={{ width: 180 }}
                                placeholder="选择盘点类型"
                                optionFilterProp="children"
                        >
                              <Option value="">全部</Option>
                              <Option value="1">自动盘点</Option>
                              <Option value="2">手动盘点</Option>
                            </Select>
                        )}
                    </FormItem>                  
                    <FormItem>
                        {getFieldDecorator('status')(
                            <Select
                                showSearch
                                style={{ width: 150 }}
                                placeholder="选择状态"
                                optionFilterProp="children"
                        >
                              <Option value="">全部</Option>
                              <Option value="1">未完成</Option>
                              <Option value="2">已完成</Option>
                            </Select>
                        )}
                    </FormItem>

                    <FormItem>
                           {getFieldDecorator('createTime')(
                                <RangePicker style={{ width:'300px' }}  format="YYYY-MM-DD" />
                            )}
                    </FormItem>

                    <FormItem>
                        <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
                    </FormItem>
                    <FormItem>
                        <Button size="large" htmlType="reset" onClick={handleClear}>清空</Button>
                    </FormItem>                   
                </Form>
            </div>

            <div style={{width:'100%',padding:"30px 20px",}}>
                <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={inventorySheet.list} pagination={pagination}
                scroll={{ y: document.body.clientHeight - 218 }}
                />
            </div>
            </div>
                <InventorySheetResultModal {...modalViewProps} />
        </div>
    );
}

function mapStateToProps(state) {
  return { inventorySheet : state.inventorySheet,loading:state.loading.models.inventorySheet};
}

InventorySheet = Form.create()(InventorySheet);
export default connect(mapStateToProps)(InventorySheet);
